<div class="row sql-editor mt-3">

  <div class="col-12 sql-input">

    <mat-card class="h-100 py-3">
      <mat-card-content class="h-100 d-flex flex-column w-100">
        <div class="d-flex justify-content-between align-items-center">

          <h3 class="my-0 fw-bold">SQL</h3>

          <div>

            <button
              mat-button
              color="primary"
              (click)="viewShortkeys()">
              Shortkeys
            </button>

            <button
              mat-button
              color="primary"
              (click)="sqlFileImport.click()">
              Import
            </button>

            <mat-slide-toggle
              labelPosition="before"
              [(ngModel)]="safeMode">
              Safe mode
            </mat-slide-toggle>

          </div>
        </div>

        <div class="row mt-3 mb-4 h-100">
          <div class="col-12">
            <ng-container *ngIf="input?.options">

              <app-codemirror-sql [(model)]="input"></app-codemirror-sql>

            </ng-container>
          </div>
        </div>

        <div class="d-flex justify-content-end align-items-center">

          <app-openai-prompt
            fileType="sql"
            (callback)="insertFromOpenAI($event)"
            callbackText="Use"
            [currentFileContent]="input.sql"
            currentFileSession="sql-studio.editor"
            class="w-100">
          </app-openai-prompt>
    
          <button
            mat-button
            color="primary"
            (click)="loadSnippet()">
            Snippets
          </button>

          <button
            mat-button
            color="primary"
            (click)="save()">
            Save
          </button>

          <button
            mat-flat-button
            color="primary"
            class="px-4"
            [disabled]="executingSql"
            (click)="execute()">
            Execute
          </button>

          <input
            type="file"
            name="sqlFile"
            id="sqlFile"
            #sqlFileImport
            class="d-none"
            accept=".sql"
            [(ngModel)]="sqlFile"
            (change)="importSqlFile($event)">

        </div>

      </mat-card-content>
    </mat-card>

  </div>

  <ng-container *ngIf="queryResult && queryResult.length > 0">
    <div class="col-12 mt-3" *ngFor="let item of queryResult; let queryResultIndex = index">

      <mat-card class="pt-3">
        <mat-card-content class="h-100 max-height-full">

          <div class="table-responsive w-100">
            <table
              mat-table
              class="w-100 borderless hoverable"
              [dataSource]="item">

              <ng-container *ngFor="let column of displayedColumns[queryResultIndex]" [matColumnDef]="column">

                <th mat-header-cell *matHeaderCellDef class="ps-3 text-nowrap">
                  {{column}}
                </th>

                <td mat-cell *matCellDef="let row" class="ps-3 text-truncate">

                  <ng-container *ngIf="column !== 'created';else dateColumn">
                    {{row[column] ?? '[null]'}}
                  </ng-container>

                  <ng-template #dateColumn>
                    {{row[column] | date}}
                  </ng-template>

                </td>

              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns[queryResultIndex];sticky: true"></tr>

              <tr mat-row *matRowDef="let row; columns: displayedColumns[queryResultIndex];"></tr>

            </table>

          </div>

          <div class="text-end">

            <button
              mat-button
              (click)="exportAsCsv(item)">
              Export as CSV
            </button>

          </div>

        </mat-card-content>
      </mat-card>

    </div>
  </ng-container>
</div>